<template>
	<div class="containerAll me-addAddress">
		<div class="itemAll">
			<div class="item" :class="[borderName?'borderactive':'bordergray']">
				<p class="itemtop" :class="[nameFlag?'hasStyle':'noStyle']">{{nameFlag?'收货人姓名':'请输入收货人姓名'}}</p>
				<input type="text" v-model="name" @focus="getFocus('name')" @blur="loseFocus('name')"/>
			</div>
			<div class="item" :class="[borderphone?'borderactive':'bordergray']">
				<p class="itemtop" :class="[phoneFlag?'hasStyle':'noStyle']">{{phoneFlag?'收货人联系电话':'请输入收货人联系电话'}}</p>
				<input type="text" v-model="phone" @focus="getFocus('phone')" @blur="loseFocus('phone')"/>
			</div>
			<div class="item bordergray" @click="choiceProvince">
				<p class="itemtop" :class="[provinceFlag?'hasStyle':'noStyle']">{{provinceFlag?'省':'请选择省'}}</p>
				<input type="text" disabled="disabled" v-model="pro" @focus="getFocus('pro')" @blur="loseFocus('pro')"/>
			</div>
			<div class="item bordergray" @click="choiceCity">
				<p class="itemtop" :class="[cityFlag?'hasStyle':'noStyle']">{{cityFlag?'市':'请选择市'}}</p>
				<input type="text" disabled="disabled" v-model="city" @focus="getFocus('city')" @blur="loseFocus('city')"/>
			</div>
			<div class="item bordergray" @click="choiceCounty">
				<p class="itemtop" :class="[countyFlag?'hasStyle':'noStyle']">{{countyFlag?'区，县':'请选择区，县'}}</p>
				<input type="text" disabled="disabled" v-model="county" @focus="getFocus('county')" @blur="loseFocus('county')"/>
			</div>
			<div v-if="townCom[0].length>0" class="item bordergray" @click="choiceTown">
				<p class="itemtop" :class="[townFlag?'hasStyle':'noStyle']">{{townFlag?'乡镇，街道':'请选择乡镇，街道'}}</p>
				<input type="text" disabled="disabled" v-model="town" @focus="getFocus('town')" @blur="loseFocus('town')"/>
			</div>
			<div class="item">
				<p class="itemtop detail" :class="[detailFlag?'hasStyle':'noStyle']">{{detail?'详细地址':'请输入详细地址'}}</p>
				<input type="text" @focus="getFocus('detail')"  @blur="loseFocus('detail')" v-model="detail"/>
			</div>
		</div>
		<div @click="setDefault()" class="setdafault">
			<div class="outP" :class="[state ?'borderActive':'borderGray']">
				<p class="innerP" v-if="state"></p>
			</div>
			<p class="default">设为默认</p>
		</div>
	  	<div class="save" :class="[saveClick]" @click="save">
			保存
		</div>
		<div v-if="pickerModalStatus" v-show="pickerModal" id="pickerModal">
			<div v-if="this.provinceDataFlag" class="modal">
				<div class="modalTop flex">
					<span @click="pickerModalCancel">取消</span>
					<span class="sure" @click="pickerModalSure('pro')">确认</span>
				</div>
			    <picker :data='provinceCom' v-model='newYear' @on-change='change'></picker>
			</div>
			<div v-else-if="this.cityDataFlag" class="modal">
				<div class="modalTop flex">
					<span @click="pickerModalCancel">取消</span>
					<span class="sure" @click="pickerModalSure('city')">确认</span>
				</div>
			    <picker :data='cityCom' v-model='newYear' @on-change='change1'></picker>
			</div>
			<div v-else-if="this.countyDataFlag" class="modal">
				<div class="modalTop flex">
					<span @click="pickerModalCancel">取消</span>
					<span class="sure" @click="pickerModalSure('county')">确认</span>
				</div>
			    <picker :data='countyCom' v-model='newYear' @on-change='change2'></picker>
			</div>
			<div v-else-if="townCom[0].length>0" class="modal">
				<div class="modalTop flex">
					<span @click="pickerModalCancel">取消</span>
					<span class="sure" @click="pickerModalSure('town')">确认</span>
				</div>
			    <picker :data='townCom' v-model='newYear' @on-change='change3'></picker>
			</div>
		</div>
	</div>
</template> 

<script>
import http from '@/util/http'
import Api from '@/util/api'
import utils from '@/util/util'
import { Picker } from 'vux'
import { mapState,mapMutations, mapActions } from 'vuex'

export default {
  components: {
    Picker
  },
  data () {
    return {
    	nameFlag: false,
    	detailFlag:this.$route.query.detail?true:false,
    	borderName: false,
    	borderphone: false,
    	phoneFlag: false,
    	provinceFlag: false,
    	provinceDataFlag: false,
    	townDataFlag: false,
    	cityDataFlag: false,
    	cityDataFlag: false,
    	cityFlag: false,
    	countyFlag: false,
    	townFlag: this.$route.query.town?true:false,
    	pickerModalStatus: false,
     	pickerModal: false,
     	provinces: [[]],
     	citys: [[]],
     	countys: [[]],
     	towns: [[]],
	    initPro: 1,
	    initCity: 0,
	    initCounty: 0,
	    initTown: 0,
	    newYear: ['0'],
	    name: this.$route.query.name||'',
	    phone:  this.$route.query.phone||'',
	    pro:  this.$route.query.pro||'',
	    city:  this.$route.query.city||'',
	    county:  this.$route.query.county||'',
	    town:  this.$route.query.town||'',
	    detail: this.$route.query.detail||'',
	    saveFlag: false,
	    regionCode: '',
	    state: this.$route.query.state?true:false,
	    defaultState:''
    }
  },
  created: function () {
  		this.fetchprovince()
  },
  mounted: function () {
  		if(this.name){
  			this.nameFlag = true;
  		}
  		if(this.phone){
  			this.phoneFlag = true;
  		}
  		if(this.pro){
  			this.provinceFlag = true;
  		}
  		if(this.city){
  			this.cityFlag = true;
  		}
  		if(this.county){
  			this.countyFlag = true;
  		}
  },
    computed: {
		...mapState ({
			addAddress: state => state.addAddress
		}),
		provinceCom () {
			for (var i = 0; i < this.addAddress.province.length; i++) {
				this.provinces[0].push({
					name:  this.addAddress.province[i].name,
    				value: this.addAddress.province[i].code
				})
			}
			return this.provinces;
		}
		,cityCom () {
			if (this.citys[0].length != 0) {
				this.citys[0].length = 0;
			}
			for (var i = 0; i < this.addAddress.city.length; i++) {
				this.citys[0].push({
					name:  this.addAddress.city[i].name,
    				value: this.addAddress.city[i].indexCity,
    				data: this.addAddress.city[i].code
				})
			}
			return this.citys;
		}
		,countyCom() {
			if (this.countys[0].length != 0) {
				this.countys[0].length = 0;
			}
			for (var i = 0; i < this.addAddress.county.length; i++) {
				this.countys[0].push({
					name:  this.addAddress.county[i].name,
    				value: this.addAddress.county[i].indexCounty,
    				data: this.addAddress.county[i].code
				})
			}
			return this.countys;
		},
		townCom () {
			if (this.addAddress.town.length < 1) {
				return [[]];
			}
			if (this.towns[0].length != 0) {
				this.towns[0].length = 0;
			}
			for (var i = 0; i < this.addAddress.town.length; i++) {
				this.towns[0].push({
					name:  this.addAddress.town[i].name,
    				value: this.addAddress.town[i].indexTown,
    				data: this.addAddress.town[i].code
				})
			}
			return this.towns;
		}
		,saveClick () {
			if (this.name&&this.phone&&this.pro&&this.city&&this.county&&this.detail) {
				this.saveFlag = true;
				return 'saveActive'
			} else{
				this.saveFlag = false;
				return 'saveGray'
			}
		}
	},
  methods: {
  	...mapActions({
 		fetchprovince: 'addAddress/fetchprovince',
 		fetchcity: 'addAddress/fetchcity',
 		fetchcounty: 'addAddress/fetchcounty',
 		savenfo: 'addAddress/savenfo',
 		fetchtown: 'addAddress/fetchtown'
 	}),
 	...mapMutations({
 		FetchProvince: 'addAddress/FetchProvince'
 	}),
 	change (value) {
      	this.initPro = value;
    },
    change1 (value) {
      	this.initCity = value;
    },
    change2 (value) {
      	this.initCounty = value;
    },
    change3(value) {
    	this.initTown = value;
    }
   	,choiceProvince() {
   		this.newYear = ['0'];
   		this.pickerModalStatus = true;
   		this.pickerModal = true;
   		this.provinceDataFlag = true;
   		this.cityFlag = false;
   		this.countyFlag = false;
   		this.townFlag = false;
   		this.city = '';
   		this.county = '';
   		this.town = '';
   	},
   	choiceCity() {
   		if (!this.pro) {
   			this.toast('请先选择省份');
   			return;
   		}
   		if(this.$route.query.pro == this.pro) {
   			let id = this.$route.query.regionCode.split('_')[0];
   			this.fetchcity({id:parseInt(id)});
   		}
   		this.newYear = ['0'];
   		this.pickerModalStatus = true;
   		this.pickerModal = true;
   		this.provinceDataFlag = false;
   		this.cityDataFlag = true;
   		this.countyFlag = false;
   		this.townFlag = false;
   		this.county = '';
   		this.town = '';
   	},
   	choiceCounty() {
   		if (!this.city) {
   			this.toast('请先选择城市');
   			return;
   		}
   		if(this.$route.query.city == this.city) {
   			let id = this.$route.query.regionCode.split('_')[1];
   			this.fetchcounty({id:parseInt(id)});
   		}
   		this.newYear = ['0'];
   		this.pickerModalStatus = true;
   		this.pickerModal = true;
   		this.provinceDataFlag = false;
   		this.cityDataFlag = false;
   		this.countyDataFlag = true;
   		this.townFlag = false;
   		this.town = '';
   	},
   	choiceTown() {
   		this.newYear = ['0'];
   		this.pickerModalStatus = true;
   		this.pickerModal = true;
   		this.provinceDataFlag = false;
   		this.cityDataFlag = false;
   		this.countyDataFlag = false;
   		this.townDataFlag = false;
   	}
   	,pickerModalCancel() {
   		this.pickerModal = false;
   	},
   	pickerModalSure(type) {
   		if (type == 'pro') {
   			this.pro = this.provinces[0][this.initPro-1].name;
   			if (this.regionCode) {
   				this.regionCode = '';
   			}
   			this.regionCode += this.provinces[0][this.initPro-1].value;
   			this.provinceFlag = true;
   			this.fetchcity({id:parseInt(this.regionCode)})
   		} else if (type == 'city') {
   			this.city = this.citys[0][this.initCity].name;
   			this.cityFlag = true;
   			if (this.regionCode.split('_').length > 1) {
   				this.regionCode=this.regionCode.split('_')[0]
   			}
   			this.regionCode += '_'+ this.citys[0][this.initCity].data;
   			this.fetchcounty({id:parseInt(this.regionCode.split("_")[1])})
   		} else if (type == 'county') {
   			this.county = this.countys[0][this.initCounty].name;
   			if (this.regionCode.split('_').length > 2) {
   				this.regionCode=this.regionCode.split('_')[0]+'_'+this.regionCode.split('_')[1]
   			}
   			this.regionCode += '_'+this.countys[0][this.initCounty].data;
   			this.countyFlag = true;
   			this.fetchtown({id:parseInt(this.regionCode.split("_")[2])})
   		} else if (type == 'town') {
   			this.town = this.towns[0][this.initTown].name;
   			if (this.regionCode.split('_').length > 3) {
   				this.regionCode=this.regionCode.split('_')[0]+'_'+this.regionCode.split('_')[1]+'_'+this.regionCode.split('_')[2]
   			}
   			this.regionCode += '_'+this.towns[0][this.initTown].data;
   			this.townFlag = true;
   		}
   		this.pickerModal = false;
   	},
   	save () {
   		if (this.saveFlag) {
   			if (this.$route.query.regionCode) {
   				if (this.phone.indexOf('****') < 0) {
			      if (!(/^1[34578]\d{9}$/.test(this.phone))) {
			        this.toast('手机号码输入有误');
			        return false;
			      }
			    }
   			}else if (!(/^1[34578]\d{9}$/.test(this.phone))) {
		      this.toast('手机号码输入有误');
		      return false;
		    }
   			if (this.regionCode.split('_').length < 4) {
   				this.regionCode += '_0'
   			}
   			if(this.state){
   				this.defaultState = 'ISDEFAULT'
   			}else{
   				this.defaultState = 'INUSE'
   			}
   			let params = {
				"address": this.detail,
				"cityName": this.city,
				"consignee": this.name,
				"phone": this.phone,
				"provinceName": this.pro,
				'areaName': this.county,
				"state": "ISDEFAULT",
				'state':this.defaultState,
				'regionCode': this.regionCode
				,'townName': this.town
				,userId:utils.getUserInfo().user.id
			}
   			if (this.$route.query.regionCode) {
   				console.log(111)
   				Object.assign(params,{
   					"id": this.$route.query.adressId
   					,'regionCode': this.regionCode.length < 6 ? this.$route.query.regionCode:this.regionCode
   					,'townName': this.$route.query.town!='null' ? this.$route.query.town:''
   				})
   				this.post(Api.userUpdateUserAddress,params).then(res => {
	   				if (res.code == 200) {
	   					window.history.go(-1)
	   				}else{
	   					this.toast(res.message)
	   				}
	   			})
   			} else{
   				console.log(222)
   				this.post(Api.userAddUserAddress,params).then(res => {
	   				if (res.code == 200) {
	   					window.history.go(-1)
	   				}else{
	   					this.toast(res.message)
	   				}
	   			})
   			}
   		} else{
   			alert('保存失败')
   		}
   	}
   	,setDefault(){
   		this.state = !this.state;
   	}
   	,getFocus(type) {
   		if (type == 'name') {
   			this.borderName = true;
   			this.nameFlag = true;
   		} else if (type == 'phone') {
   			this.borderphone = true;
   			this.phoneFlag = true;
   		}else if (type == 'pro') {
   			this.borderprovince = true;
   			this.provinceFlag = true;
   		}else if (type == 'city') {
   			this.bordercity = true;
   			this.cityFlag = true;
   		}else if (type == 'county') {
   			this.bordercounty = true;
   			this.countyFlag = true;
   		}else if (type == 'detail') {
   			this.detailFlag = true;
   		}
   	},
   	loseFocus(type) {
   		if (type == 'name') {
   			if (this.name) {
   				this.borderName = false;
   				this.nameFlag = true;
   				return;
   			}
   			this.borderName = false;
   			
   			this.nameFlag = false;
   		} else if (type == 'phone') {
   			if (this.phone) {
   				this.borderphone = false;
   				this.phoneFlag = true;
   				return;
   			}
   			this.borderphone = false;
   			this.borderName = false;
   			this.phoneFlag = false;
   		} else if (type == 'pro') {
   			if (this.pro) {
   				this.borderprovince = false;
   				this.provinceFlag = true;
   				return;
   			}
   			this.provinceFlag = false;
   		} else if (type == 'city') {
   			if (this.city) {
   				this.bordercity = false;
   				this.cityFlag = true;
   				return;
   			}
   			this.cityFlag = false;
   		} else if (type == 'count') {
   			if (this.count) {
   				this.bordercount = false;
   				this.countFlag = true;
   				return;
   			}
   			this.countFlag = false;
   		} else if (type == 'detail') {
   			if (this.detail) {
   				this.detailFlag = true;
   				return;
   			}
   			this.detailFlag = false;
   		}
   	}
  }
}
</script>
<style lang="less" rel="stylesheet/less">
	.me-addAddress{
		background: #f2f2f2;
		width: 7.5rem;
		height: 100%;
		position: absolute;
		bottom: 0rem;
		.itemAll{
			width: 7.5rem;
			background: #FFFFFF;
		}
		#pickerModal{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 7.5rem;
			padding-left: .3rem;
			height: 100%;
			background: rgba(0,0,0,.3);
			.modal{
				width: 7.5rem;
				position: relative;
				left: -.3rem;
				top: 40%;
				height: 60%;
				background: #FFFFFF;
			}
			.modalTop{
				padding: 0 .3rem 0 .3rem;
				height: 1rem;
				line-height: 1rem;
				font-size: .42rem;
				justify-content: space-between;
				border-bottom: 1px solid #F2F2F2;
			}
			.sure{
				color: #FBC200;
			}
		}
		.bordergray{
			border-bottom: 1px solid #F2F2F2;
		}
		.borderactive{
			border-bottom: 1px solid #FBC200;
		}
		.item{
			width: 6.9rem;
			height: 1.21rem;
			background: #FFFFFF;
			margin-left: .3rem;
			position: relative;
			input{
				height: .3rem;
				line-height: .3rem;
				font-size: .26rem;
				position: absolute;
				bottom: .26rem;
				background: rgba(0,0,0,0);
			}
			.hasStyle{
				height: .2rem;
				line-height: .2rem;
				font-size: .2rem;
				top: .26rem;
				transition: all 1s ease; 
			}
			.noStyle{
				height: .3rem;
				line-height: .3rem;
				font-size: .3rem;
				bottom: .26rem;
			}
			.itemtop{
				position: absolute;
				color: #909090;
			}
		}
		.nameOut{
			width: 7.5rem;
			height: 1.02rem;
			background: #ffffff;
			.name{
				width: 6.9rem;
				height: .42rem;
				line-height: .48rem;
				padding: .3rem 0;
				margin-left: .3rem;
				font-size: .3rem;
				color: #464646;
				border-bottom: 1px solid #F2F2F2;
			}
			.adress{
				width: 6.9rem;
				height: .42rem;
				padding: .3rem 0;
				margin-left: .3rem;
				font-size: .3rem;
				color: #464646;
				border-bottom: 1px solid #F2F2F2;
				.weui-cell{
					padding: 0;
				}
			}
		}
		.saveGray{
			background: #BCBCBC;
		}
		.saveActive{
			background: #FBC200;
		}
		.save{
			width: 6.9rem;
			height: 1rem;
			line-height: 1rem;
			border-radius: .08rem;
			margin: .7rem 0 0 .3rem;
			text-align: center;
			color: #464646;
			font-size: .32rem;
		}
		.setdafault{
			height: .3rem;
			line-height: .3rem;
			padding: .3rem .3rem;
			color: #454545;
			font-size: .28rem;
			background: #F2F2F2;
			.borderGray{
				border: 1px solid #BCBCBC;
			}
			.borderActive{
				border: 1px solid #FBC200;
			}
			.outP{
				width: .26rem;
				height: .26rem;
				border-radius: 50%;
				display: inline-block;
				position: relative;
				top: .03rem;
			}
			.innerP{
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: .18rem;
				height: .18rem;
				background: #FBC200;
				border-radius: 50%;
			}
			.default{
				margin-left: .2rem;
				display: inline-block;
				position: relative;
			    top: -.31rem;
			    left: .2rem;
			}
		}
	}
</style>





